<template>
	<view class="root">
		<uni-popup 
			class="popup"
			ref="popup" 
			type="bottom" 
			border-radius="10px 10px 0 0"
			>
			<view class="container">
				<view class="header">
					<image src="../../static/icon/notepad-icon.png" mode=""></image>
					<view class="text-area">
						<view class="top">
							Hi,欢迎
						</view>
						<view class="bottom">
							<view class="name">小程序名称</view>
							<view class="text">申请使用</view>
						</view>
						
					</view>
				</view>
				<view class="main">
					<view class="title-tip">
						获取你的昵称、头像、联系方式及地区信息
					</view>
					<view class="account-info">
						<image class="avatar" :src="userInfo.avatar" mode=""></image>
						<view class="text-info">
							<view class="nickname">{{userInfo.nickname}}</view>
							<view class="phone">{{userInfo.phone}}</view>
						</view>
					</view>
					<view class="button-area">
						<button class="reject">拒绝</button>
						<button class="agree" @click="login()">同意</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {onLoad, onShow, onReady} from '@dcloudio/uni-app'
	
	const appId = "wxa906c62033d7a84e"
	const appSecret = "4fa9c335bdfe12f237ca760c34cf5d14"
	
	const popup = ref(null)
	
	const userInfo = ref({
		avatar: '/static/icon/success-icon.png',
		nickname: '微信昵称',
		phone: '',
		code: ''
	})
	
	async function login() {
		const res = await uni.request({
			method:'POST',
			url:`http://localhost:8080/user/auth/login`,
			data: {
				wxLoginCode: userInfo.value.code,
				avatar: userInfo.value.avatar,
				nickname: userInfo.value.nickname
			}
		})
		close()
		if(res.statusCode === 200 ) {
			if(res.data.code === 0) {
				uni.setStorageSync('token', res.data.data)
				uni.switchTab({
					url:'/pages/tabBar/index/index'
				})
				uni.showToast({
					title:'登录成功'
				})
			}else {
				uni.showToast({
					title:'登录失败'
				})
			}
			
		} else {
			uni.showToast({
				title:'登录异常'
			})
		}
		
		
	}
	
	const open = () => {
		uni.login({
		    provider: 'weixin',
		    success: function (loginRes) {
				//	存储用户登陆的短暂凭证
				userInfo.value.code = loginRes.code
				console.log(loginRes)
		        // 登录成功
		        uni.getUserInfo({
		            provider: 'weixin',
		            success: function(info) {
		                // 获取用户信息成功, info.authResult保存用户信息
						const wxUserInfo = info.userInfo
						userInfo.value = {
							...userInfo.value,
							avatar: wxUserInfo.avatarUrl,
							nickname: wxUserInfo.nickName,
						}
						console.log(info.userInfo)
		            }
		        })
		    },
		    fail: function (err) {
		        // 登录授权失败
		        // err.code是错误码
				console.log(err)
		    }
		});
		
        popup.value.open('bottom')
    }
	
	const close = () => {
		popup.value.close()
	}
	
	defineExpose({
		//	打开弹框
		openPopup: open
	})


</script>

<style lang="scss" scoped>

	.root {
		
		.popup {
			.container {
				padding: 30rpx;
				background-color: white;
				border-radius: 50rpx;
				height: 700rpx;
				display: flex;
				flex-direction: column;
				gap: 40rpx;
				.header {
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-weight: 700;
					image {
						width: 100rpx;
						height: 100rpx;
					}
					.text-area {
						display: flex;
						flex-direction: column;
						.top {
							
						}
						 .bottom {
							 display: flex;
							 .name {
							 	margin-right: 20rpx;
							 	font-size: 36rpx;
							 	
							 }
							 .text {
							 	
							 }
						 }
					}
					
				}
				.main {
					position: relative;
					height: 410rpx;
					display: flex;
					flex-direction: column;
					gap: 30rpx;
					align-items: center;
					.title-tip {
						width: 100%;
						font-weight: 700;
						font-size: 30rpx;
						text-align: left;
					}
					.account-info {
						position: relative;
						padding: 10rpx 0;
						width: 100%;
						display: flex;
						gap: 10rpx;
						align-items: center;
						font-weight: 700;
						&::before {
							position: absolute;
							top: 0;
							display: block;
							content: '';
							width: 100%;
							height: 1px;
							background-color: #d2d2d2;
						}
						&::after {
							position: absolute;
							bottom: 0;
							display: block;
							content: '';
							width: 100%;
							height: 1px;
							background-color: #d2d2d2;
						}
						.avatar {
							height: 100rpx;
							width: 100rpx;
						}
						.text-info {
							display: flex;
							flex-direction: column;
							gap: 0.3em;
							.nickname {
								
							}
							.phone {
								
							}
						}
					}
					.button-area {
						position: absolute;
						bottom: 5%;
						display: flex;
						padding: 0 50rpx;
						
						gap: 30rpx;
						button {
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 20rpx;
							width: 250rpx;
							height: 80rpx;
						}
						.reject {
							background-color: #a8bfd5;
						}
						.agree {
							background-color: #2ec076;
							color: white;
							font-weight: 700;
						}
					}
				}
				
			}
		}
	}
	
	
</style>